<?php  isset($cartInfo) ? $type = 'cart' : $type = 'user';?>
<style>
.measure-guide{box-sizing:border-box;overflow:hidden;position:absolute;top:0;left:0;z-index:4;width:1200px;padding:2% 2% 6%; border:solid 1px #777;background-color:#fff;}
.measure-guide em{font-style:normal;}
.basic-info dd{margin-bottom:2em;}
.basic-info dd em{display:inline-block;width:39%;font-size:1.125em;text-align:right;vertical-align:middle;}
.basic-info dd span{display:inline-block;position:relative;width:60%;}
.basic-info input{width:48%;height:36px;margin:0 -2.5em 0 1.5em;padding:0 2em 0 .5em;border:1px solid #ccc;vertical-align:middle;}
.basic-info input:focus{border:1px solid #3cf;}
.basic-info .error.msg{position:absolute;top:100%;left:0;margin-left:1.7em;font-size:14px;}
.basic-info .btn {margin:5px 0 0 1.4em;}
.pop-up{padding:2em;background-color:#696969;color:#fff;text-align:left;}

@media screen and (max-width: 1200px) {
  .measure-guide {width: 98%;}
}
@media screen and (max-width: 768px) {
  .basic-info input{width:60%;}
}
@media screen and (max-width: 568px) {
  .measure-guide {width:90%;}
  .basic-info {width:300px;margin:0 auto;}
  .basic-info dd em, .basic-info dd span {display:block;width:100%;}
  .basic-info dd em {margin-bottom:5px;text-align:left;}
  .basic-info input{width:95%;margin-left:0;}
  .basic-info .error.msg, .basic-info .btn {margin-left:0;}
}
</style>
<div class="hide clearfix main-width measure-guide js-measure-guide">
  <form>
    <dl class="basic-info">
      <dt class="align-center mb2x title"><?php echo L('your_basic_information');?></dt>
      <dd>
        <em><?php echo L('profile_name');?></em>
        <span><input type="text" name="measure_name" data-required="<?php echo L('_measure_name_rule_');?>" /></span>
      </dd>
      <dd>
        <em><?php echo L('age');?></em>
        <span>
          <input type="text" name="measure[age]" data-required="<?php echo L('_measure_age_rule_');?>" data-min="<?php echo L('_measure_age_rule_1_');?>">
        </span>
      </dd>
      <dd>
        <em><?php echo L('height');?></em>
        <span>
          <input type="text" name="measure[height][cm]" data-required="<?php echo L('_measure_height_rule_');?>" data-min="<?php echo L('_measure_height_rule_1');?>"> cm
        </span>
      </dd>
      <dd>
        <em><?php echo L('weight');?></em>
        <span>
          <input type="text" name="measure[weight][kg]" data-required="<?php echo L('_measure_weight_rule_');?>" data-min="<?php echo L('_measure_weight_rule_1');?>"> kgs
        </span>
      </dd>
      <dd>
        <em></em>
        <button type="submit" class="btn"><?php echo L('submit');?></button>
      </dd>
    </dl>
  </form>
  <i class="close js-close">×</i>
</div>
<script src="/statics/front/js/scripts/measure/common.js"></script>
<script>
$(function() {
  var $measureGuide = $('.js-measure-guide'),
      $measureForm = $measureGuide.children('form');

  $('.js-add-measurement').on('click', function() {
    $measureGuide.removeClass('hide');
    position.fixPosition($measureGuide);
    $measureGuide.after('<div class="mask show"></div>');
  });

  $measureGuide.on('click', '.js-close', function () {
    $measureGuide.addClass('hide').next().remove();
  });

  (function() {
    $measureForm.validate({//身形数据表单验证
      errorElement: 'p',
      submitHandler: function(form) {
        var measureFields = {};

        $measureForm.find('*').filter(':input').not('button').each(function() {
          measureFields[$(this).attr('name')] = $(this).val();
        });

        $.ajax({
          url: '/measure/get_size_ajax',
          type: 'post',
          data: measureFields
        }).done(function(data) {
          var response = $.parseJSON(data);
          if (response.status === true) {
            window.location.href = "<?php echo url('measure/add').'/type/';if(ACTION_NAME == 'login' || ACTION_NAME == 'register'){echo 'cart/countiue_buy/1';}else{ echo $_GET['countiue_buy'] ? 'cart/countiue_buy/1' : $type; }?>";
          }
        });
      },
      errorPlacement: function(error, element) {
        element.after(error);
        error.addClass('msg');
      },
      rules: {
        measure_name: {
          required: true,
          remote: {
            url: '/measure/check_measure_name_ajax',
            type: 'post',
            dataType: 'json',
            data: {
              measure_name: function() {
                return $('input[name=measure_name]', $measureForm).val();
              }
            }
          }
        },
        'measure[age]': {
          required: true,
          min: 1
        },
        'measure[height][cm]': {
          required: true,
          heightGreaterZeroCm: true
        },
        'measure[weight][kg]': {
          required: true,
          weightGreaterZeroKg: true
        }
      },
      messages: {
        measure_name: {
          required: $('input[name=measure_name]', $measureForm).data('required')
        },
        'measure[age]': {
          required: $('input[name="measure[age]"]', $measureForm).data('required'),
          min: $('input[name="measure[age]"]', $measureForm).data('min')
        },
        'measure[height][cm]': {
          required: $('input[name="measure[height][cm]"]', $measureForm).data('required'),
          min: $('input[name="measure[height][cm]"]', $measureForm).data('min')
        },
        'measure[weight][kg]': $('input[name="measure[weight][kg]"]', $measureForm).data('required')
      }
    });

    jQuery.validator.addMethod('heightGreaterZeroCm', function(value, element) {
      return Number(value) > 0;
    }, $('input[name="measure[height][cm]"]', $measureForm).data('min'));

    jQuery.validator.addMethod('weightGreaterZeroKg', function(value, element) {
      return Number(value) > 0;
    }, $('input[name="measure[weight][kg]"]', $measureForm).data('min'));
  }());
});
</script>